/*
 * 有赞产品搜索
 * @Author: zfx
 * @Date: 2018-09-27 14:22:07
 */
<template>
	<Form
		ref="formInline"
		inline
		@keydown.native.enter.prevent="confirmSearch">
		<!-- 关键字 -->
		<Form-item
			:label-width="80"
			:label="$t('common.keyword')"
			prop="keyword">
			<i-input
				v-model="formValidate.keyword"
				:placeholder="$t('product.please_enter_title_key')"
				type="text"/>
		</Form-item>
		<!-- 类别 -->
		<Form-item
			:label-width="80"
			:label="$t('product.category')"
			prop="category_id">
			<Select
				v-model="formValidate.category_id"
				clearable
				style="width:120px">
				<OptionGroup
					v-for="(item,key) in groupCategories"
					:key="key"
					:label="item.custom_type_name">
					<Option
						v-for="(value,key) in item.categories"
						:value="Number(value.id)"
						:key="key">{{ value.name }}</Option>
				</OptionGroup>
			</Select>
		</Form-item>
		<!-- 品牌 -->
		<Form-item
			:label-width="80"
			:label="$t('product.brand')"
			porp="brand_id">
			<Select
				v-model="formValidate.brand_id"
				clearable
				style="width:120px">
				<Option
					v-for="( value , key ) in brands"
					:value="key + ''"
					:key="key">{{ value }}</Option>
			</Select>
		</Form-item>
		<!-- 是否上架 -->
		<Form-item
			:label-width="80"
			:label="$t('product.is_deleted')"
			porp="is_sale">
			<Select
				v-model="formValidate.is_sale"
				style="width:120px"
				clearable>
				<Option
					v-for="status in true_false_status"
					:value="status.value"
					:key="status.value">{{ status.label }}</Option>
			</Select>
		</Form-item>
		<!-- 搜索 -->
		<Form-item>
			<Button
				type="primary"
				@click="confirmSearch">
				{{ $t('common.search') }}
			</Button>
		</Form-item>
		<!-- 导出Excel -->
		<Form-item>
			<Button
				type="primary"
				@click="confirmExcel">
				{{ $t('common.export_excel') }}
			</Button>
		</Form-item>
		<!-- 同步有赞在售商品 -->
		<Form-item
			:label-width="50">
			<Button
				type="primary"
				@click="$emit('syncSale')">
				{{ $t('product.sync_youzan_sale') }}
			</Button>
		</Form-item>

	</Form>
</template>
<script>

import { mapGetters } from 'vuex';

export default {

	name: 'YouzanProductSearchForm',

	props: {
		brands: {
			type: [Object, Array],
			required: true,
		},
		groupCategories: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			youzan_status: [
				{
					label: this.$t('product.no'), // 否
					value: 'not_youzan',
				},
				{
					label: this.$t('product.yes'), // 是
					value: 'youzan',
				},
			],
			true_false_status: [
				{
					label: this.$t('product.no'), // 否
					value: '0',
				},
				{
					label: this.$t('product.yes'), // 是
					value: '1',
				},
			],
			formValidate: {
				is_sale: '',

				is_deleted: '',

				is_hot: '',

				is_new: '',

				brand_id: '', // 品牌

				category_id: '', // 类别

				keyword: '',
			}, // 搜索框的对象参数
		};
	},
	computed: {
		...mapGetters('userToken', [
			'getUserInfo',
		]),
	},
	mounted() {

	},

	methods: {

		/**
		 * 导出excel表格
		 * @return {undefined}
		 */
		confirmExcel() {
			this.$emit('export');
		},

		/**
         * 确认搜索
         * @return {undefined}
         */
		confirmSearch() {
			const param = {
				is_sale: this.formValidate.is_sale,

				is_deleted: this.formValidate.is_deleted,

				is_hot: this.formValidate.is_hot,

				is_new: this.formValidate.is_new,

				brand_id: this.formValidate.brand_id,

				category_id: this.formValidate.category_id,

				keyword: this.formValidate.keyword,
			};

			this.$emit('search', param);
		},

	},

};

</script>

